import React, { useRef, useState, useEffect } from 'react';

function Ref() {
  // useRef 获取 DOM 元素，并且可以通过 useRef 控制 DOM 的属性与值
  const inputEl = useRef(null)
  const getDom = () => {
    inputEl.current.value = 'Alomy'
    console.log(inputEl);
  }
  // useRef 保存变量
  const [text, setText] = useState('start')
  const textRef = useRef()
  useEffect(()=>{
    textRef.current = text
    console.log('textRef.current ==> ', textRef.current);
  })

  return (
    <>
      <input type="text" ref={inputEl} />
      <button onClick={getDom}>显示</button>
      <br />
      <input type="text" value={text} onChange={e => setText(e.target.value)} />
    </>
  )
}

export default Ref
